<template>
  <el-dialog class="notice" append-to-body :close-on-click-modal="false" :visible.sync="dialogVisible" @close="$emit('close')">
    <div class="notice-content" :style="{'text-align':textAlign}">
      <div class="notice-icon">
        <i class="icon cuifont" :class="icon" :style="{'color': iconColor}"></i>
      </div>
      <div class="notice-title">{{ title }}</div>
      <div class="notice-info">
        <slot name="info"></slot>
        <div v-html="info"></div>
        <slot name="group"></slot>
      </div>
      <div class="notice-btn">
        <el-button size="small" v-bind="otherButton" @click="other" v-if="otherButton">{{ otherButton.text }}</el-button>
        <el-button size="small" v-bind="okButton" @click="ok" v-if="okButton">{{ okButton.text }}</el-button>
        <el-button size="small" v-bind="closeButton" @click="dialogVisible = false" v-if="closeButton">{{ closeButton.text }}</el-button>
      </div>

      <slot name="position"></slot>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'notice',
  props: {
    visible: {
      type: Boolean
    },
    icon: {
      type: String
    },
    iconColor: {
      type: String,
      default: '#F8B501'
    },
    title: {
      type: String
    },
    info: {
      type: String
    },
    otherButton: {
      type: Object
    },
    okButton: {
      type: Object
    },
    closeButton: {
      type: Object
    },
    textAlign: {
      type:String
    }
  },
  data () {
    return {
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    ok () {
      this.dialogVisible = false
      this.$emit('ok')
    },
    other () {
      this.dialogVisible = false
      this.$emit('other')
    }
  }
}
</script>

<style scoped lang="scss">
.notice{
  ::v-deep .el-dialog {
    width: 384px;
  }
  ::v-deep .el-dialog__body,::v-deep .el-dialog__header {
    padding: 0;
    position: relative;
    .el-dialog__headerbtn {
      z-index: 999;
    }
  }
  &-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px;
    text-align: center;
  }
  &-icon{
    margin-bottom: 36px;
    i{
      font-size: 74px;
    }
  }
  &-title {
    font-size: 18px;
    color: #404040;
    line-height: 26px;
  }
  &-info {
    font-size: 14px;
    color: #808080;
    line-height: 18px;
    margin-top: 6px;
  }
  &-btn {
    width: 100%;
    .el-button {
      width: 100%;
      margin-left: 0;
      margin-bottom: 8px;
    }
    .el-button:first-child {
      margin-top: 40px;
    }
    .el-button:last-child {
      margin-bottom: 0
    }
  }
}
</style>
